<!--
 * @Author: ReinerLau lk850593913@gmail.com
 * @Date: 2022-09-20 17:36:18
 * @LastEditors: ReinerLau lk850593913@gmail.com
 * @LastEditTime: 2022-11-15 16:06:39
 * @FilePath: \robot\src\views\patroling\DeviceStatus.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="text-white mb-7">设备状态</div>
    <div class="flex flex-wrap">
      <div v-for="item in statusList" :key="item.title" class="flex w-1/2 mb-4">
        <span class="text-white opacity-40 w-20">{{ item.title }}</span>
        <span class="text-white">{{ item.value }}</span>
        <span class="text-white">{{ item.unit }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed } from "vue";
import usePatrolingStore from "@/store/patroling";
import { storeToRefs } from "pinia";

const { patrolingInfo } = storeToRefs(usePatrolingStore());

const statusList = computed(() => {
  const { temperature, humidity, blaze, noise, smoke, pm, pm10, h2S, ch4, co } =
    patrolingInfo.value;
  return [
    {
      title: "温度",
      unit: "℃",
      value: temperature || 0,
    },
    {
      title: "湿度",
      unit: "%",
      value: humidity || 0,
    },
    {
      title: "火焰",
      unit: "",
      value: blaze ? "有火焰" : "无火焰",
    },
    {
      title: "噪音",
      unit: "DB",
      value: noise || 0,
    },
    {
      title: "烟雾",
      unit: "",
      value: smoke ? "有烟雾" : "无烟雾",
    },
    {
      title: "PM2.5",
      unit: "ug/m",
      value: pm || 0,
    },
    {
      title: "PM10",
      unit: "ug/m³",
      value: pm10 || 0,
    },
    {
      title: "硫化氢",
      unit: "ug/m³",
      value: h2S || 0,
    },
    {
      title: "甲烷",
      unit: "ug/m³",
      value: ch4 || 0,
    },
    {
      title: "一氧化碳",
      unit: "ug/m³",
      value: co || 0,
    },
  ];
});
</script>
